<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  	<title>JQuery Form Wizard</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
 		<link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.8.2.custom.css" />  
    <style type="text/css">
			#demoWrapper {
				padding : 1em;
				width : 500px;
				border-style: solid;
			}

			#fieldWrapper {
			}

			#demoNavigation {
				clear: both;
				margin-top : 0.5em;
				margin-right : 1em;
				text-align: right;
			}
			
			#data {
				font-size : 0.7em;
			}

			input {
				margin-right: 0.1em;
				margin-bottom: 0.5em;
			}

			.input_field_25em {
				width: 2.5em;
			}

			.input_field_3em {
				width: 3em;
			}

			.input_field_35em {
				width: 3.5em;
			}

			.input_field_12em {
				width: 12em;
			}

			label {
				margin-bottom: 0.2em;
				font-weight: bold;
				font-size: 0.8em;
			}

			label.error {
				color: red;
				font-size: 0.8em;
				margin-left : 0.5em;
			}

			.step div, .step span {
				clear : both
				float: right;
				font-weight: bold;
				padding-right: 0.8em;
			}

			.navigation_button {
				width : 70px;
			}
			
			#data {
					overflow : auto;
			}

		</style>
	</head>
  <body>
		<div id="demoWrapper">
			<h3>Example of how to make the wizard ignore some input fields by using the class 'wizard-ignore'.</h3>
			<ul>
			<li>Wizard with two steps</li>
			<li>On the first step the branching is decided depending on which country is selected.</li>
			<li>The input with id:s man and woman have the class 'wizard-ignore' and are not touched by the wizard during step transitions</li>
			<li>The inputs with id:s man and woman are enabled and disabled outside of the wizard's control (on the change event of the select box with id 'sex') </li>
			</ul>
			<hr />
			<h5 id="status"></h5>
			<form id="demoForm" method="post" action="json.html" class="bbq">
				<div id="fieldWrapper">
					<div class="step" id="first"> 
						<span class="font_normal_07em_black">First step - Country</span><br />
						<label for="country">Country</label><br />
						<select class="input_field_12em link required" name="country" id="country"> 
						<option value=""></option> 
						<option  value="sweden">Sweden</option> 
						<option value="finland">Finland</option> 
						</select><br /> 
						<label for="sex">Sex</label><br />
						<select class="input_field_12em link required" name="sex" id="sex"> 
						<option value=""></option> 
						<option value="man">man</option> 
						<option value="woman">woman</option> 
						</select><br /> 

						<div id="man">
							<label>shown if man is selected</label><br />
							<input class="input_field_25em" name="man_stuff" />
						</div>
					</div> 
					<div id="sweden" class="step submit_step"> 
						<span class="font_normal_07em_black">Social Security Number</span><br />
						<div id="woman">
							<label>This is shown if woman was selected</label><br />
							<input class="input_field_25em" name="woman_stuff" /><br />
						</div>

						<label for="day_se">Social Security Number</label><br /> 
						<input class="input_field_25em" name="day" id="day_se" value="DD" /> 
						<input class="input_field_25em" name="month" id="month_se" value="MM" /> 
						<input class="input_field_3em" name="year" id="year_se" value="YYYY" /> - 
						<input class="input_field_3em" name="lastFour" id="lastFour_se" value="XXXX" /><br /> 
					</div> 
				</div>
				<div id="demoNavigation"> 							
					<input class="navigation_button" id="back" value="Back" type="reset" />
					<input class="navigation_button" id="next" value="Next" type="submit" />
				</div>
			</form>
			<hr />
			
			<p id="data"></p>
		</div>

    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>		
    <script type="text/javascript" src="../js/jquery.form.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/bbq.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
    
    <script type="text/javascript">
			// add a function that we can call to hide or toggle the sex specific stuff
			function hideOrToggleSexSpecificStuff(sex){
				$("#man,#woman").hide().find(":input").addClass("wizard-ignore").attr("disabled", "disabled"); //wizard-ignore tells the wizard to not touch the input fields
				if(sex !== undefined && sex !== ""){
					$("#" + sex).fadeIn(1000).find(":input").removeClass("wizard-ignore").removeAttr("disabled");
				}
			}
			
			// add an onchange event to the sex dropdown.
			$("#sex").change(function(){
				hideOrToggleSexSpecificStuff($(this).val()); // toggle the sex specific stuff
			})

			
			$(function(){
				hideOrToggleSexSpecificStuff(); // hide the sex specific stuff initially 

				$("#demoForm").formwizard({ 
				 	formPluginEnabled: true,
				 	validationEnabled: true,
				 	focusFirstInput : true,
				 	formOptions :{
						success: function(data){
							hideOrToggleSexSpecificStuff(); // hide the man and woman specific stuff
							$("#status").fadeTo(500,1,function(){ 
								$(this).html("You are now registered!").fadeTo(5000, 0); 
							
						})},
						beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
						dataType: 'json',
						resetForm: true
				 	}	
				 }
				);
  		});
    </script>
	</body>
</html>
